<template>
	<section class="jumbotron">
		<h3 class="jumbotron-heading">Search Github Users</h3>
		<div>
			<input v-model="keyWord" type="text" placeholder="enter the name you search"/>&nbsp;
			<button @click="search">Search</button>
		</div>
	</section>
</template>

<script>
	import axios from 'axios';

	export default {
		name:'Search',
		data(){
			return {
				keyWord:''
			}
		},
		methods:{
			async search(){
				try {
					//发送请求前给List传递数据
					this.$bus.$emit('user-list',{users:[],errMsg:'',isLoading:true,isFirst:false})
					//发送请求
					const searchResult = await axios.get('https://api.github.com/search/users',{
						params:{q:this.keyWord}
					})
					//请求成功后，通过事件总线把数据传给List
					this.$bus.$emit('user-list',{users:searchResult.data.items,isLoading:false})
				} catch (error) {
					//请求失败后，通过事件总线把数据传给List
					this.$bus.$emit('user-list',{errMsg:error.message,isLoading:false})
					console.log('请求出错',error)
				}
			}
		}
	}
</script>
